vue静态路由vue-router怎么使用
静态路由vue-router使用路由可以方便我们访问多个组件，后面也会使用到路由跳转中安装:npm install vue --save-devnpm install vue-router --save-dev引入模块router在App.vue里面加写入 <router-view></router-view>在命令提示行输入 “npm run dev” 执行项目在浏览器输入域名地址 “域名地址+路由地址” 如： http://localhost:...
2024-01-10
vue-computed计算属性
计算属性：用来封装你想对一个属性进行的操作computed VS mothod实现的效果和定义一个methods中的function相同，但是他们的区别在于：methods的function当触发重新渲染时总会重新执行，而计算属性是基于他们的依赖进行缓存的，只有在它的相关依赖进行改变时才会改变，这就意味着它的相关依赖没有发生改...
2024-01-10
vue-quill-editor插入图片路径太长问题解决方法
最近做项目的时候有一个发布新闻的需求，新闻编辑的时候要求能发布带格式的文本内容和能展示支持图片。由于项目是用 Vue 开发的，所以找编辑器的时候选了 vue-quill-editor 。编辑器长如下的样子：现在的问题但是这个编辑器会把插入的图片会转成 base64 位的编码，使得编辑器内容保存进数据库的...
2024-01-10
vue实践---vue不依赖外部资源实现简单多语操作
vue使用多语，最常见的就是 vue-i18n, 但是如果开发中的多语很少，比如就不到10个多语，这样就没必要引入vue-i18n了， 引入了反正导致代码体积大了，这时候单纯用vue实现多语就是比较好的选择。第一步首先建立一个locales.js 存放多语语言包的内容，这里只写了 zh-CN, en这两种语言，其他还想新增的话 ...
2024-01-10
vue升级之路之vue-router的使用教程
使用 Vue 构建的项目，一个页面是由多个组件构成的，而且经常是做成单页面应用，所以在跳转页面的时候，传统的 href 已经跟不上时代的步伐了，于是 vue-router 应运而生在使用 vue-router 的时候，需要看看自己是否装了这个依赖，没有的话可以使用 npm install vue-router -S ，不过现在构建vue项目时有可以选...
2024-01-10
vue-router定义元信息meta操作
router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Test from '../views/Test.vue'import NotFound from '../views/NotFound.vue'import TestChild from '../views/TestChild.vue'import AView from '../vi...
2024-01-10
petite-vue源码剖析-从静态视图开始
代码库结构介绍examples 各种使用示例scripts 打包发布脚本tests 测试用例srcdirectives v-if等内置指令的实现app.ts createApp函数block.ts 块对象context.ts 上下文对象eval.ts 提供v-if="count === 1"等表达式运算功能scheduler.ts 调度器utils.ts 工具函数walk.ts 模板解析若想构建自己的版本只需在控制台执行npm run bui...
2024-01-10
Vue关于使用vue-router控制视图渲染的问题。
环境：Vue2.0 + vue-router + element-ui + 新手,思路：想通过正则判断vue-router的$route.path来控制SideBar组件的渲染与否，具体代码如下：App.vue<template> <div id="app"> <div class="warper"> <div class="header"> <TopBar></TopBar> </div> <el-row><el-col :span="2" > ...
2024-01-10
vue-router 路由懒加载
webpack打包会将所有资源文件合并压缩成一个文件，导致最终的文件非常大，甚至超过几M，以致页面首次加载会比较慢，如下图：其中红色标出的是在浏览器中加载的js文件，gzip压缩前已经达到500多KB了。再看看路由按需加载后：文件被拆成一个个小的文件，即webpack的文件分割。这里是以页面为单位...
2024-01-10
怎么排查 Vue-Router 渲染不出来的问题？
问题描述开发环境vue 3.3.4vue-router@4IDE: vs-code 1.80我尝试跟着 vue-router官方教程 做demo, router-link 渲染了, 但是 router-view 没有渲染. 页面和控制台又没报错。试了好多种方法，检查了关键字是否写错，都不行.请大家帮忙看看, thanks!文件列表main.jsimport { createApp } from '...
2024-02-07React和Vue中监听变量变化的方法
React 中本地调试React代码的方法yarn build场景假设有这样一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state。16之前在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换16之后在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听， getDerivedSta...
2024-01-10
vue与react的区别
1.创建者等react是Facebook公司创建的js框架，并创新了新的语法，JSX（html in javascript），而vue相对来说更容易学习，且使用模板系统，Reat与Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。2.关于虚拟dom改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。·Virtual DOM是一...
2024-01-10
你不知道的React 和 Vue 的20个区别【源码层面】
前言面试竞争力越来越大，是时候撸一波Vue和React源码啦； 本文从20个层面来对比Vue和React的源码区别； 如果需要了解API的区别，请戳： Vue 开发必须知道的 36 个技巧 React 开发必须知道的 34 个技巧文章源码：请戳，原创码字不易，欢迎star！1.Vue和React源码区别1.1 Vue源码来张Vue源码编译过程图图...
2024-01-10
react和vue对比
相同点都支持服务器端渲染都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范数据驱动视图都有支持native的方案,React的React native,Vue的weex不同点React严格上只针对MVC的view层,Vue则是MVVM模式virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件...
2024-01-10
浅谈vue和react的数据流和绑定
就数据流来说：Vue和React均是单向数据流传递，举个例子：单向数据流指只能从一个方向修改数据，姑且我们可以这样理解，如下图所示。一个父组件下有两个子组件1和子组件2，父组件可以向子组件传递数据。假如子组件都获取到了父组件的name，在子组件1中对name重新修改之后，子组件2和父组件中的...
2024-01-10Mega 和 SecureSafe 之间的区别
兆丰MEGA 是一种基于云的服务，可以从任何具有 Internet 访问权限的设备或平台访问。它主要是为基于浏览器的应用程序设计的。此外，它还为 Windows、Android 手机和 Apple 手机准备了移动应用程序。MEGA 于 2013 年 1 月 20 日创建，正好是美国政府臭名昭著的摧毁 Megaupload 一年后。它由 Kim Dotcom、Mathias Ortmann ...
2024-01-10
在项目vue中使用echarts的操作步骤
1.在组件中创建该模块<template> <div id = "testChart"></div></template>2.导入echarts前提是：已经在项目中配置过echarts在<script></script>中导入echarts<script>import {echartInit} from "../../../utils/echartUtils"</script>3.初始化该模块 export default { name: 'Test', //vue该组件名称Test.vue moun...
2024-01-10
vue和react对比
区别：1：vue使用模板语法，和HTML很相似，因此初学者易上手。 2：react使用JSX，它要求开发者借助JSX在JavaScript中创建DOM。3：vue更快，这是因为，react渲染是将所有子组件都渲染一遍，如果想要避免不必要的渲染，则需要使用pureComponent或者手动实现shouldComponentUpdate, 而vue优化了这个问题，自动实现了s...
2024-01-10
vue清除定时器，clearInterval
let time = 10 let intervalFunc = window.setInterval(() => { time = time - 1 if (time < 1) { window.clearInterval(intervalFunc) } }, 1000)...
2024-01-10
React、Vue浅析
关注前端的同学都了解，React和Vue是目前应用很广泛的两个前端框架。React是由Facebook开发的，Vue起初则是由google一名程序员尤雨溪开发的。截止到目前github上显示，React的Star数为87422，Vue的为78523，数据差距越来越小。两个框架国内外使用概况如图1所示： 图1 国外前端框架使用概况 ...
2024-01-10
vue中v-show和v-if的异同
一、官方解释：v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么...
2024-01-10
Vue-Devtools插件使用
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧安装: 1.到github下载：git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包12cd vue-devtoolscnpm install3.修改manifest.json文件把"persistent":false改成true 4.编译...
2024-01-10
vue中ts写的代码必须加分号吗？
第一次在vue中用ts，发现会保存后会自动加上分号，不加分号会报错vscode配置时不加分号的，请问下这种情况该怎么处理Step1:Install eslint-config-prettier:npm install --save-dev eslint-config-prettier prettierStep2:add eslint-config-prettier to the "extends" array in your .eslintrc.* file. Make sure to put it la...
2024-01-10
vue-devtools使用问题？
Chorm浏览器打开控制器vue项目就报关闭就不会有这个错，大佬们 这怎么弄回答：这有个文章和你的问题一样：https://blog.csdn.net/egg_er/article/details/124679458这个如果不行试试：在谷歌游览器中移除devtools插件，再重新添加一下。目前我用的 "vue": "^2.7.10" 插件4.14 没有报错回答：试一下使用低版本的vue dev...
2024-03-01
vue之slot用法
slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。一、单个组件如果子组件的模板不包含 slot，那么父组件的内...
2024-01-10
Vue中的slot，作用域插槽和具名插槽
1、具名插槽有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。//组件调用时<MyFooter v-red :age.sync="age"> <template v-slot:footer> //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。 <div>list</div> </template></MyFooter>//书写组件时<template> ...
2024-01-10
Vue.js常用指令：v-model
v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。使用v-model可以在表单控件或者组件上创建双向绑定。代码示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
2024-01-10
深入理解vue中的slot与slot-scope
写在前面vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，于是就关闭了vue说明文档。实际上，插槽的概念很简单，下面...
2024-01-10
vue中的slot（插槽）
原文地址：https://www.cnblogs.com/loveyt/p/9946450.htm什么是插槽？插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组...
2024-01-10
vue-简单的todolist
<template><div class="root"><!-- <div class="bg" style="font-size:0"><img v-bind:src="imgArr[cur_img_index]"><img v-bind:src="imgArr[cur_img_index]"> ...
2024-01-10
